<template>
    <div class="app-container">
        <el-row :gutter="24">
            <el-col>
                <p>试卷信息</p>
                <el-divider></el-divider>
            </el-col>
            <el-col :span="4">
                <el-form ref="paperForm" :model="paperForm" label-width="80px">
                    <el-form-item label="试卷名称">
                        <el-input v-model="paperForm.paperName" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="二维码">
                        <el-image style="width: 100px; height: 100px" :src="paperForm.qrCode"></el-image>
                    </el-form-item>
                    <el-form-item label="待考人数">
                        <el-input v-model="paperForm.waitUserNum" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="已考人数">
                        <el-input v-model="paperForm.alreadyUserNum" :disabled="true">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="待考状态">
                        <el-input v-model="paperForm.waitState" :disabled="true">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="截至日期">
                        <el-input v-model="paperForm.waitTime" :disabled="true">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="创建时间">
                        <el-input v-model="paperForm.createTime" :disabled="true">
                        </el-input>
                    </el-form-item>

                </el-form>
            </el-col>

        </el-row>

        <el-row>
            <el-col>
                <el-row>
                    <el-col :span="22">
                        <p>题目信息</p>
                    </el-col>
                    <el-col :span="2">
                        <el-button @click="unfoldCollapse">展开/关闭</el-button>
                    </el-col>
                </el-row>
                <el-divider></el-divider>
            </el-col>
            <el-col v-for="(item, index) in this.questionList">
                <div>{{ item.content }}</div>
                <el-divider></el-divider>
                <div>题目解析：{{ item.analysis }}</div>

                <el-divider></el-divider>
                <div>答案：</div>
                <el-collapse v-model="activeNames" @change="handleChange">
                    <el-collapse-item >
                        <div v-for="(question, index) in item.quAnswers">{{ question.answerAnalysis }}</div>
                    </el-collapse-item>
                </el-collapse>

            </el-col>
        </el-row>
    </div>
</template>

<script>

import { queryPaperInfo } from '@/api/onlineQuestion/index'
export default {

    data() {
        return {
            paperForm: {},
            activeNames: [],
            questionList: [],
            quIds: []
        }
    },

    created() {
        this.queryPaperInfo(this.$route.params.waitPaperId);
    },
    computed: {

    },
    methods: {
        queryPaperInfo(waitPaperId) {
            queryPaperInfo({
                'waitPaperId': waitPaperId
            }).then(res => {
                if (res.code === 200) {
                    this.paperForm = res.data
                    if (res.data.radioList !== undefined) {
                        res.data.radioList.forEach(element => {
                            this.questionList.push(element)
                            this.quIds.push(element.quId.toString())
                        });
                    }
                    if (res.data.multiList !== undefined) {
                        res.data.multiList.forEach(element => {
                            this.questionList.push(element)
                            this.quIds.push(element.quId.toString())
                        });
                    }
                    if (res.data.judgeList !== undefined) {
                        res.data.judgeList.forEach(element => {
                            this.questionList.push(element)
                            this.quIds.push(element.quId.toString())
                        });
                    }
                    if (res.data.shortAnswerList !== undefined) {
                        res.data.shortAnswerList.forEach(element => {
                            this.questionList.push(element)
                            this.quIds.push(element.quId.toString())
                        });
                    }

                }
            })

        },
        handleChange() {

        },
        // 展开or关闭答案
        unfoldCollapse() {
            this.activeNames = [];
            for (const nameId of this.quIds) {
                    this.activeNames.push(nameId)
            }
            console.log(this.activeNames)
        }

    }

}
</script>

<style></style>